:root {
  --w7-cb-size: 14px;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font: var(--w7-font);
  background: none;
  border: none;
  margin: 0;
  opacity: 0;

  + label {
    font: var(--w7-font);
    display: inline-flex;
    align-items: center;
    position: relative;

    &::before {
      content: "";
      display: inline-block;
      width: var(--w7-cb-size);
      height: var(--w7-cb-size);
      margin-right: 6px;
      box-sizing: border-box;
      background: #f6f6f6;
      border: 1px solid var(--w7-el-bd);
      box-shadow: inset 0 0 0 1px var(--w7-el-bg-d), inset 1px 1px 0 1px #aeaeae, inset -1px -1px 0 1px #ddd, inset 3px 3px 6px #ccc;
      transition: 0.4s;
    }

    &:hover::before {
      background: #e9f7fe;
      border-color: var(--w7-el-bd-h);
      box-shadow: inset 0 0 0 1px #def9fa, inset 1px 1px 0 1px #79c6f9, inset -1px -1px 0 1px #c6e9fc, inset 3px 3px 6px #b1dffd;
    }
  }

  &:focus-visible {
    + label {
      outline: 1px dotted #000;
    }
  }

  &:checked {
    + label {
      &::after {
        content: "\2714";
        font-weight: bold;
        display: block;
        position: absolute;
        top: 0;
        left: 2px;
        color: #4a5f97;
      }
    }
  }

  &:disabled {
    + label {
      color: #6d6d6d;

      &::before {
        content: "";
        display: inline-block;
        width: var(--w7-cb-size);
        height: var(--w7-cb-size);
        margin-right: 6px;
        background: linear-gradient(to bottom right, #f0f0f0, #fbfbfb);
        box-shadow: none;
        border: 1px solid #b1b1b1;
      }

      &::after {
        color: #bfbfbf;
      }
    }
  }
}
